<template>
  <div class="container">
      <div class="title">
          <h2>{{post_detail.post_title}}</h2>
      </div>
      <div class="msg">
          <h6>{{post_detail.user_name}}</h6>
          <h6>{{post_detail.add_time}}</h6>
      </div>
      <div class="summary">
          <p>{{post_detail.summary}}</p>
      </div>
      
      <div class="images">
          <img :src="item" alt="" v-for="(item,i) in post_detail.images" :key="i">
      </div>

      <div class="post-comment" v-if="this.$store.state.login_data.isLogined">
          <h3>写评论:</h3>
          <textarea name="" cols="3" rows="3" maxlength="50" v-model="post_comment"></textarea>
          <button class="post-comment-btn" @click="postComment">发表评论</button>
      </div>

      <div class="post-warning">
          <h2>{{post_warning}}</h2>
      </div>

      <div class="comments">
          <h3>评论区:</h3>
          <div class="comment">

              <div class="item" v-for="(item,i) in comments" :key="i">
                  <div class="comment-msg">
                      <h5>{{item.comment_user}}</h5>
                      <h5>{{item.add_time}}</h5>
                  </div>
                  <div class="comment-content">
                      <h6>{{item.content}}</h6>
                  </div>
              </div>
            

          </div>
      </div>
      
      <div class="comments-warning">
        <h2>{{comments_warning}}</h2>
      </div> 

      <div class="btn-group">
        <button @click="getMoreComments">加载更多</button>
      </div> 



  </div>
</template>

<script>
export default{
    data(){
        return {
            post_detail:{},
            post_comment:'',
            post_warning:'',
            comments:[],
            comments_warning:'',
            page:0,
        }
    },
    mounted:function(){
        this.$store.commit('setTitle','detail');
        this.$store.commit('switchIsOriginPath',false);
        this. getDetail(this.$route.query.post_data);
        this.getComments();      
    },
    // destroyed () {
    //     window.removeEventListener('scroll', this.scrollToTop); 
    // },
    methods:{
        getDetail(data){
            this.post_detail=data;
        },

        postComment(){
            if(this.post_comment.length==0){
                this.post_warning="请填写评论";
            }else{
                var time=this.getNowFormatDate();
                var data={
                    user_name:this.$store.state.login_data.user_name,
                    post_title:this.post_detail.post_title,
                    add_time:time,
                    post_comment:this.post_comment
                };
                this.$http.post(this.$store.state.server_home_url+'/addcomment',data)
                .then((res)=>{
                    if(res.body.status==0){
                        this.post_warning='评论成功';
                        this.post_comment='';
                        this.comments=[];
                        this.getComments();
                    }else{
                        this.post_warning='发布失败';
                    }
                })
            }
        },

        getComments(){
            var data={
                post_title:this.post_detail.post_title,
                page:this.page
            };
            this.$http.get(this.$store.state.server_home_url+'/getcomments',{params:data}).then((res) => {
                
                if(res.body.data.length==0){
                    this.comments_warning='已无更多';
                }else{
                    this.comments=this.comments.concat(res.body.data);
                }

            },(err) => {
                console.log(err);
            })          
        },

        getMoreComments(){
            this.page++;
            this.getComments();
        },

        getNowFormatDate() {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (day >= 0 && day <= 9) {
                day = "0" + day;
            }
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }            
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            if (second >= 0 && second <= 9) {
                second = "0" + second;
            }
            var current_time = year + seperator1 + month + seperator1 + day+' '+hour+':'+minute+':'+second;
            return current_time;
        }
    }
}
</script>


<style lang="scss" scoped>
    .container{
        margin-top:25%;
        .title{
            border-bottom:red solid 1px;
            h2{
                text-align: center;
                margin-bottom: 5px;
            }
        }

        .msg{
            display: flex;
            justify-content: space-between; 
            border-bottom:red solid 1px;
            h6{
                margin: 5px 5px 5px 5px;
            }     
        }

        .summary{
            border-bottom:blue solid 1px;
            padding:5px 10px 0 10px;
            p{
                text-align: justify;
            }
        }

        .images{
            width:80%;
            margin:5% auto 0 auto;
            img{
                width:100%;
                height:auto;
                margin-top:8%;
                border-radius: 10px 10px;
                box-shadow: black 8px 8px 8px;
            }
        }

        .post-comment{
            width:80%;
            margin:0 auto;
            padding-bottom: 10px;
            border-bottom:green solid 1px;
            h3{
                margin-bottom:7px;
            }
            textarea{               
                width:100%;
                background: #ddd;
                border: 0;     
            }
            .post-comment-btn{
                display: block;
                margin:10px auto 5px auto;
                width: 70%;
                height: 40px;
                color:white;
                font-size: 20px;
                border-radius: 10px 10px;
                background: #00a0ea;                
            }
        }
        .post-warning{
            text-align: center; 
            color: red;            
        }

        .comments{
            width:80%;
            margin:0 auto;
            border-radius: 10px 10px;
            .item{
                margin-top:0;
                background: #ddd;
                border-bottom: 2px solid black;
                padding:0 5px;
                .comment-msg{
                    display: flex;

                    justify-content: space-between;
                    border-bottom: 1px solid black;
                    h5{
                        margin-top:5px;
                        margin-bottom:5px;
                    }
                }
                .comment-content{
                    margin:0;
                    padding: 0;
                    
                    h6{
                        margin:3px 0 5px 0;
                        text-align: justify;
                    }
                }
            }
        }

        .btn-group{
            margin-bottom: 30px;
            button{
                display: block;
                margin:20px auto 0 auto;
                width: 50%;
                height: 50px;
                border-radius: 15px 15px;
                font-size: 18px;
                background: black;
                color:white;
            }
        }

        .comments-warning{
            h2{
                text-align: center;
                color:red;
            }
        } 
    }
</style>
